<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="标题">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" @click="handleOpenDialog" v-if="$formatFR(noticeCenter.add)"
          >新增</el-button
        >
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop label="主键" type="index" width="50" align="center" />
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="digest" label="摘要" align="center" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="updateTime" label="修改时间" align="center" />
      <el-table-column prop="author" label="作者" align="center" />
      <el-table-column prop="published" label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.published === "Y" ? "已发布" : "未发布" }}
        </template>
      </el-table-column>
      <el-table-column prop label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="$formatFR(noticeCenter.pub) && scope.row.published === 'N'"
            plain
            @click="handlePublished(scope.row.id)"
            >发布</el-button
          >
          <el-button
            type="warning"
            size="mini"
            v-if="$formatFR(noticeCenter.edit) && scope.row.published === 'N'"
            plain
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            v-if="$formatFR(noticeCenter.del)"
            plain
            @click="handleDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
    <EditDialog ref="EditDialog" @updatePage="getList"></EditDialog>
  </el-card>
</template>

<script>
import { page, del, getById, edit } from "@/api/system/notice"
import FUNCROLELIST from "@/utils/func_role/system"
import EditDialog from "./components/EditDialog.vue"
import { mapGetters } from "vuex"
export default {
  components: {
    EditDialog
  },
  data() {
    return {
      noticeCenter: FUNCROLELIST.notice,
      form: {
        title: "",
        size: 10,
        current: 1
      },
      tableData: [],
      total: 0
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        title: "",
        size: 10,
        current: 1
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    handleOpenDialog() {
      this.$refs.EditDialog.init()
    },
    // 编辑
    handleUpdate(scope) {
      this.$refs.EditDialog.init(scope)
    },
    // 搜索
    handleSearch() {
      this.form.current = 1
      this.getList()
    },
    // 参数数据列表
    getList() {
      page(this.form).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 删除
    handleDel(id) {
      this.$confirm("请确认是否删除当前参数?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    handlePublished(id) {
      this.$confirm("请确认是否发布当前通知?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const { data } = await getById(id)
        const _data = {
          id,
          published: "Y",
          title: data.title,
          author: this.userInfo.nickname,
          content: data.content,
          cover: data.cover,
          digest: data.digest
        }
        await edit(_data)
        this.getList()
        this.$store.dispatch("notice/getNoticeNumAction")
        this.$message({
          type: "success",
          message: "发布成功"
        })
      })
    }
  }
}
</script>
